<template>
	<view class="income_set_up_page">
		<view class="income_set_up">
			<view class="income_type_title">线上商城商品推广收入分成设置</view>
			<!--			<view class="income_tips">收入由商品推广员和您本人共分，总占比100%</view>-->
			<view class="income_proportion_box">
				<view class="income_proportion">
					<view class="proportion_label">推广员收入占比</view>
					<view class="proportion_value_box">
						<input
							maxlength="2"
							@input="handleInput($event, 'mallPromotionRatio')"
							@blur="handleBlur($event, 'mallPromotionRatio')"
							v-model="incomeSetUpInfo.mallPromotionRatio"
							class="proportion_value"
							type="number" />
						<view class="percentage_sign">%</view>
					</view>
				</view>
				<!--				<view class="income_proportion self_income">-->
				<!--					<view class="proportion_label">您本人收入占比</view>-->
				<!--					<view class="proportion_value_box">-->
				<!--						<view class="proportion_value">{{ getSelfIncome(incomeSetUpInfo.mallPromotionRatio) }}</view>-->
				<!--						&lt;!&ndash;						<input disabled v-model="getSelfIncome(incomeSetUpInfo.mallPromotionRatio)" class="proportion_value" type="number" />&ndash;&gt;-->
				<!--						<view class="percentage_sign">%</view>-->
				<!--					</view>-->
				<!--				</view>-->
			</view>
			<view class="income_describe_box">
				<view class="income_describe">以“工作室成员（即推广员）销售一件商品，工作室获得总收入为10元，其中工作室成员（即推广员）收入占比为60%为例</view>
				<view class="xjs-mt-32">— 推广员获得的收入为：10×60%=6元</view>
			</view>
		</view>
		<view class="income_set_up">
			<view class="income_type_title">陪宠服务接单收入分成设置</view>
			<!--			<view class="income_tips">收入由接单陪充师和您本人共分，总占比100%</view>-->
			<view class="income_proportion_box">
				<view class="income_proportion">
					<view class="proportion_label">陪宠师收入占比</view>
					<view class="proportion_value_box">
						<input
							maxlength="2"
							@input="handleInput($event, 'serviceAcceptanceRatio')"
							@blur="handleBlur($event, 'serviceAcceptanceRatio')"
							v-model="incomeSetUpInfo.serviceAcceptanceRatio"
							class="proportion_value"
							type="number" />
						<view class="percentage_sign">%</view>
					</view>
				</view>
				<!--				<view class="income_proportion self_income">-->
				<!--					<view class="proportion_label">您本人收入占比</view>-->
				<!--					<view class="proportion_value_box">-->
				<!--						<view class="proportion_value">{{ getSelfIncome(incomeSetUpInfo.serviceAcceptanceRatio) }}</view>-->
				<!--						<view class="percentage_sign">%</view>-->
				<!--					</view>-->
				<!--				</view>-->
			</view>
			<view class="income_describe_box">
				<view class="income_describe">以“工作室成员（即接单陪宠师）接了一个陪宠服务订单，工作室获得总收入为10元，其中工作室成员（即接单陪宠 师）收入占比为60%为例</view>
				<view class="xjs-mt-32">— 陪宠师获得的收入为：10×60%=6元</view>
				<!--				<view class="xjs-mt-16">— 您本人获得的收入为：10×40%=4元</view>-->
			</view>
		</view>
		<view class="income_set_up">
			<view class="income_type_title">陪宠服务推广收入分成设置</view>
			<!--			<view class="income_tips">收入由陪宠服务推广员和您本人共分，总占比100%</view>-->
			<view class="income_proportion_box">
				<view class="income_proportion">
					<view class="proportion_label">推广员收入占比</view>
					<view class="proportion_value_box">
						<input
							maxlength="2"
							@input="handleInput($event, 'servicePromotionRatio')"
							@blur="handleBlur($event, 'servicePromotionRatio')"
							v-model="incomeSetUpInfo.servicePromotionRatio"
							class="proportion_value"
							type="number" />
						<view class="percentage_sign">%</view>
					</view>
				</view>
				<!--				<view class="income_proportion self_income">-->
				<!--					<view class="proportion_label">您本人收入占比</view>-->
				<!--					<view class="proportion_value_box">-->
				<!--						<view class="proportion_value">{{ getSelfIncome(incomeSetUpInfo.servicePromotionRatio) }}</view>-->
				<!--						<view class="percentage_sign">%</view>-->
				<!--					</view>-->
				<!--				</view>-->
			</view>
			<view class="income_describe_box">
				<view class="income_describe">以“工作室成员（即推广员）促成一个陪宠服务订单，工作 室获得总收入为10元，其中工作室成员（即推广员）收入 占比为60%为例</view>
				<view class="xjs-mt-32">— 推广员获得的收入为：10×60%=6元</view>
				<!--				<view class="xjs-mt-16">— 您本人获得的收入为：10×40%=4元</view>-->
			</view>
		</view>
		<view class="footer_btn_box">
			<view class="xjs-btn-primary confirm_submit" @click="confirmSubmit()">确认提交</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import api from "@/api/index";
import { onLoad } from "@dcloudio/uni-app";
import BigNumber from "bignumber.js";

// 定义 incomeSetUpInfo 类型
type IncomeSetUpInfoType = {
	type: number;
	userId: string;
	studioId: string;
	mallPromotionRatio: number;
	serviceAcceptanceRatio: number;
	servicePromotionRatio: number;
};

let incomeSetUpInfo = reactive<IncomeSetUpInfoType>({
	type: 1, //1-修改工作室 2-修改个人
	userId: "",
	studioId: "",
	mallPromotionRatio: 0,
	serviceAcceptanceRatio: 0,
	servicePromotionRatio: 0
});

/// 处理输入事件
const handleInput = (e: Event, key: keyof IncomeSetUpInfoType) => {
	const value = (e.target as HTMLInputElement).value;
	// 只保留数字
	const numericValue = value.replace(/\D/g, "");
	const num = parseInt(numericValue, 10);
	// 限制数字范围在 1 - 99
	if (numericValue) {
		if (num < 1) {
			(incomeSetUpInfo[key] as number) = 1;
		} else if (num > 99) {
			(incomeSetUpInfo[key] as number) = 99;
		} else {
			(incomeSetUpInfo[key] as number) = num;
		}
	} else {
		(incomeSetUpInfo[key] as number) = num;
	}
};

// 处理失去焦点事件
const handleBlur = (e: Event, key: keyof IncomeSetUpInfoType) => {
	if (!incomeSetUpInfo[key]) {
		(incomeSetUpInfo[key] as number) = 1;
	}
};
const getSelfIncome = (proportion: any) => {
	if (proportion) {
		return new BigNumber(100).minus(proportion).toNumber();
	} else {
		return 100;
	}
};
const getIncomeSetUpInfo = async () => {
	try {
		let params = {
			studioId: incomeSetUpInfo.studioId,
			userId: incomeSetUpInfo.userId
		};
		const { data } = await api({
			method: "get",
			url: `/mall/studio/petsitter-team/getRevenueSharing`,
			data: params
		});
		if (incomeSetUpInfo.type == 1) {
			incomeSetUpInfo.mallPromotionRatio = new BigNumber(100).times(data?.memberMallPromotionRatio).toNumber();
			incomeSetUpInfo.servicePromotionRatio = new BigNumber(100).times(data?.memberServicePromotionRatio).toNumber();
			incomeSetUpInfo.serviceAcceptanceRatio = new BigNumber(100).times(data?.memberServiceAcceptanceRatio).toNumber();
		} else if (incomeSetUpInfo.type == 2) {
			incomeSetUpInfo.mallPromotionRatio = new BigNumber(100).times(data?.mallPromotionRatio).toNumber();
			incomeSetUpInfo.serviceAcceptanceRatio = new BigNumber(100).times(data?.serviceAcceptanceRatio).toNumber();
			incomeSetUpInfo.servicePromotionRatio = new BigNumber(100).times(data?.servicePromotionRatio).toNumber();
		}
	} catch (error) {
		console.log(error);
	}
};
const confirmSubmit = () => {
	let content = "";
	if (incomeSetUpInfo.type == 1) {
		content = "确认后，采用默认收入分成的成员的新订单，都将按照此设置自动收入分成";
	} else if (incomeSetUpInfo.type == 2) {
		content = "确认后，此成员的新订单，都将按照此设置自动收入分成";
	}
	uni.showModal({
		title: "请确认收入分成设置",
		content,
		success: async (res) => {
			if (res.confirm) {
				// 用户点击确定按钮
				try {
					const res = await api({
						method: "PUT",
						url: `/mall/studio/petsitter-team/updateRevenueSharing`,
						data: {
							type: incomeSetUpInfo.type,
							userId: incomeSetUpInfo.userId,
							studioId: incomeSetUpInfo.studioId,
							mallPromotionRatio: incomeSetUpInfo.mallPromotionRatio / 100,
							serviceAcceptanceRatio: incomeSetUpInfo.serviceAcceptanceRatio / 100,
							servicePromotionRatio: incomeSetUpInfo.servicePromotionRatio / 100
						}
					});
					if (res.code == 0) {
						uni.showToast({
							title: "修改成功",
							icon: "none"
						});
					}
				} catch (error) {
					console.log(error);
				}
			}
		}
	});
};
onLoad(async (options) => {
	incomeSetUpInfo.type = Number(options.type);
	if (incomeSetUpInfo.type == 2) {
		uni.setNavigationBarTitle({
			title: "团队成员收入分成设置"
		});
	}
	if (options.hasOwnProperty("userId")) {
		incomeSetUpInfo.userId = options.userId;
	}
	if (options.hasOwnProperty("studioId")) {
		incomeSetUpInfo.studioId = options.studioId;
	}
	await getIncomeSetUpInfo();
});
</script>

<style scoped lang="scss">
.income_set_up_page {
	padding: 32rpx;
	box-sizing: border-box;
	padding-bottom: calc(var(--safe-area-bottom) + 104rpx);

	.income_set_up {
		width: 100%;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		margin-bottom: 40rpx;

		.income_type_title {
			font-weight: bold;
			font-size: 32rpx;
			color: #1a1a1a;
			padding-bottom: 40rpx;
			border-bottom: 1px solid #e6e6e6;
		}

		.income_tips {
			font-weight: 400;
			font-size: 26rpx;
			color: #7c807f;
			margin-top: 16rpx;
			padding-bottom: 40rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #e6e6e6;
		}

		.income_proportion_box {
			border-bottom: 1px solid #e6e6e6;
			padding: 40rpx 0;

			.income_proportion {
				display: flex;
				flex-direction: row;
				align-items: center;

				.proportion_label {
					font-weight: bold;
					font-size: 26rpx;
					color: #1b2120;
				}

				.proportion_value_box {
					position: relative;

					.proportion_value {
						margin-left: 24rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #1b2120;
						width: 416rpx;
						height: 84rpx;
						background: #f5f6f7;
						border-radius: 16rpx;
						padding: 0 16rpx;
						box-sizing: border-box;
					}

					.percentage_sign {
						position: absolute;
						right: 16rpx;
						top: 26rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #1b2120;
					}
				}
			}

			.self_income {
				margin-top: 24rpx;

				.proportion_value_box {
					.proportion_value {
						background: #fff;
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 32rpx;
						color: #cacccc;
					}
				}
			}
		}

		.income_describe_box {
			font-weight: 400;
			font-size: 24rpx;
			color: #7c807f;
			margin-top: 40rpx;

			.income_describe {
				line-height: 1.6;
			}
		}
	}

	.footer_btn_box {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2;
		width: 100%;
		background: #ffffff;
		border-top: 1rpx solid #e4e6e6;
		padding: 8rpx 32rpx;
		padding-bottom: calc(var(--safe-area-bottom) + 8rpx);
		box-sizing: border-box;

		.confirm_submit {
		}
	}
}
</style>
